<script>
  import draggable from 'vuedraggable'
  import render from '@/components/render/render'
  import VueGridLayout from 'vue-grid-layout';
  const components = {
    itemBtns(h, currentItem, index, list) {
      const { copyItem, deleteItem } = this.$listeners
      return [
        currentItem.__config__.tag !=='vantGrid' &&<span class="drawing-item-copy" title="复制" style={{right:'10px'}} onClick={event => {
          copyItem(currentItem, list); event.stopPropagation()
        }}>
          <i class="el-icon-copy-document" />
        </span> 
        ,
        <span class="drawing-item-delete" title="删除" style={{right:'40px'}} onClick={event => {
          deleteItem(index, list); event.stopPropagation()
        }}>
          <i class="el-icon-delete" />
        </span>
      ]
    }
  }
  const layouts = {
    colFormItem(h, currentItem, index, list) {
      const { activeItem } = this.$listeners
      const config = currentItem.__config__
      const child = renderChildren.apply(this, arguments)
      let className = this.activeId === config.formId ? 'drawing-item active-from-item' : 'drawing-item'
      if(Array.isArray(currentItem.children) || config.tag==='biaoqian'){
        return <div class={className}>
          {components.itemBtns.apply(this, arguments)}
          {layouts['rowFormItem'].call(this,h,currentItem)}
        </div>
    
      }
      return (
        <div class={className}>
          {components.itemBtns.apply(this, arguments)}
          <render key={config.renderKey} conf={currentItem} 
            onInput={ event => {this.$set(config, 'defaultValue', event)}} 
            onhandleStyle={ event => {this.$set(config, 'isShowStyle', event)}} 
            oncurrentTitle={ event => {this.$set(config, 'currentTitle', event)}} 
            nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}
          >
            {child}
          </render>
        </div>
      )
    },
    rowFormItem(h, currentItem, index, list) {
      const { activeItem } = this.$listeners
      const config = currentItem.__config__
      if(config.tag==='biaoqian'){
        return <div onDragover={(ev)=>{ev.preventDefault();}} class="biaoqianTb"
           onDrop={()=>{this.$emit('handDrop',currentItem)}}
           onClick={event => { activeItem(currentItem); event.stopPropagation() }}
            style={{height:'100%',width:'100%',position:'relative'}}>
            {currentItem.showtip?<div class="tabTitleClass">从左侧拖拽组件</div>:''}
          <van-tabs type={currentItem.styletype===1?'line':'card'}  onClick={(n)=>{this.setTabActive(n,currentItem)}}>
           {
            currentItem.tabList.map((item,mid)=>{
          return (
           
            <van-tab key={mid} title={item.title}>
         {this.showbiaoqian? <grid-layout
                    layout={item.fields}
                    col-num={12}
                    row-height={30}
                    is-draggable={true}
                    is-resizable={true}
                    is-mirrored={false}
                    vertical-compact={true}
                    margin={[0, 5]}
                    use-css-transforms={true}
                    key={''+currentItem.i+mid}
                    style={{width:'100%',height:'100%'}}
                  >
               {
                item.fields.map((val,ind)=>{
                  return <grid-item 
                      x={val.x}
                      y={val.y}
                      w={val.w}
                      h={val.h}
                      i={val.i}
                      key={val.i}
                      onResized={(i, newH, newW, newHPx, newWPx)=>{this.$emit('freeresize',i, newH, newW, newHPx, newWPx)}}
                      onMoved={(i, newX, newY)=>{this.$emit('freemoved',i, newX, newY)}}
                    >
                 <div class="moveclass drawing-item">
                  {components.itemBtns.call(this,h, val, ind, item.fields)}
                  <render key={val.__config__.renderKey} conf={val} 
            onInput={ event => {this.$set(val.__config__, 'defaultValue', event)}} 
            onhandleStyle={ event => {this.$set(val.__config__, 'isShowStyle', event)}} 
            oncurrentTitle={ event => {this.$set(val.__config__, 'currentTitle', event)}} 
            nativeOnClick={event => { activeItem(val); event.stopPropagation() }}
          >
          
          </render>
          </div>
                    </grid-item>  
                })
               }
                  </grid-layout>:''}
             
              </van-tab>
          )
        })
           }
          </van-tabs>
          </div> 
      }
    },
    raw(h, currentItem, index, list) {
      const config = currentItem.__config__
      const child = renderChildren.apply(this, arguments)
      return <render key={config.renderKey} conf={currentItem} onInput={ event => {
        this.$set(config, 'defaultValue', event)
      }}>
        {child}
      </render>
    }
  }
  
  function renderChildren(h, currentItem, index, list) {
    const config = currentItem.__config__
    if (!Array.isArray(config.children)) return null
    return config.children.map((el, i) => {
      const layout =layouts[el.__config__.layout]
      if (layout) {
        return layout.call(this, h, el, i, config.children)
      }
      return layoutIsNotFound.call(this)
    })
  }
  
  function layoutIsNotFound() {
    throw new Error(`没有与${this.currentItem.__config__.layout}匹配的layout`)
  }
  
  export default {
    components: {
      render,
      draggable,
      GridLayout: VueGridLayout.GridLayout,
      GridItem: VueGridLayout.GridItem,
    },
    props: [
      'currentItem',
      'index',
      'drawingList',
      'activeId'
    ],
    data(){
      return {
        showbiaoqian:true
      }
    },
    render(h) {
      let layout
      if(this.currentItem.__config__.tag==='Subform'){
        layout=tableLayouts[this.currentItem.__config__.layout]
      }else{
        layout=layouts[this.currentItem.__config__.layout]
      }
      if (layout) {
        return layout.call(this, h, this.currentItem, this.index, this.drawingList)
      }
      return layoutIsNotFound.call(this)
    },
    methods:{
      setTabActive(n,currentItem){

        console.log(n,'n22');
        this.$set(currentItem,'curtab',n);
        this.showbiaoqian = false;
        setTimeout(()=>{
          this.showbiaoqian = true;
          this.$forceUpdate();
        },0)
      }
    }
  }
  </script>
  <style scoped>
  .moveclass{
    width:100%;
    height:100%;
    border:1px solid blue;
    overflow: auto;
  }
  .tabTitleClass{
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    word-break: break-all;
    color:#333333;
    font-size: 14px;
    background:white;
    opacity: 0.4;
  }
  </style>
  <style>
    .biaoqianTb  .van-tabs__line{
    background:#1890FF;
  }
  .biaoqianTb  .van-tabs__nav--card .van-tab.van-tab--active{
    background:#1890FF;
  }
  .biaoqianTb .van-tab--card{
    color:#646566;
  }
  .biaoqianTb .van-tabs__nav--card .van-tab{
    
    border-right:1px solid #1890FF;
  }
  .biaoqianTb .van-tabs__nav--card{
    border:1px solid #1890FF;
  }
  .van-tabs__nav--card .van-tab{
    color:#646566;
  }
  </style>